<!DOCTYPE html>
<html>
    <head>
        <title>The MINT Beer Market</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1;"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <link rel="stylesheet" type="text/css" href="lib/jquery.mobile.simpledialog.min.css" />

        <style>
            .ui-li-multibubble .ui-li-count
            {
                float: right;
                font-size: 16px;
            }
            .ui-li-multibubble .ui-li-count:nth-child(odd)
            {
                margin-right: 10em;
                font-size: 16px;
            }
        </style>

        <!-- jQuery -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

        <!-- MVC: Spine.js and Mustache -->
        <script src="lib/spine/spine.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/spine/local.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/jquery.mustache.js" type="text/javascript" charset="utf-8"></script>

        <!-- Pull in our Models and Controller -->
        <script src="app/models/item.js" type="text/javascript" charset="utf-8"></script>
        <script src="app/controllers/cart_item.js" type="text/javascript" charset="utf-8"></script>
        <script src="app/controllers/shopping_cart.js" type="text/javascript" charset="utf-8"></script>

        <!-- Application Initialization -->
        <script src="app.init.js" type="text/javascript" charset="utf-8"></script>

        <!-- jQuery Mobile -->
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

        <!-- jQuery Mobile Dependent Libraries -->
        <script type="text/javascript" src="lib/jquery.mobile.simpledialog.min.js"></script>

        <!-- jQuery Format Currency Plugin -->
        <script type="text/javascript" src="lib/jquery.formatCurrency-1.4.0.js"></script>

        <!-- Mustache :-{)~ Template for MenuItem -->
        <script type="text/x-mustache-tmpl" id="menuTemplate">
            {{#items}}
            <li data-icon="plus" id="menuitem_{{stock}}">
            <a href="#" class="addmenuitem" data-menuitemid="{{stock}}" data-price="{{price}}" data-name="{{name}}">
            <img src="{{image}}" alt="{{name}}"/>
            <h3>{{name}} - <span class="currency">{{price}}</span></h3>
            <p>{{description}}</p>
            </a>
            </li>
            {{/items}}
        </script>

        <!-- Mustache :-{)~ Template for CartItem -->
        <script type="text/x-mustache-tmpl" id="cartItem">
            <li id="cartitem_{{stock}}" price="{{price}}" data-icon='delete' class='ui-li-multibubble'>
            <a href="#" class="removemenuitem" data-menuitemid="{{stock}}">
            {{name}} - <span class="currency">{{price}}</span>
            </a>
            <span class="ui-li-count">
            <span id="item-total" class="currency">
            {{total}}
            </span>
            </span>
            <span class="ui-li-count" id="qty">
            {{quantity}}
            </span>
            <fieldset data-role='controlgroup' data-type='horizontal'>
            <a href="#" data-icon='plus' class="add">Add</a>
            <a href="#" data-icon='minus' class="remove">Remove</a>
            </<fieldset></fieldset>>
            </li>
        </script>

        <!-- Mustache :-{)~ Template for ShoppingCart -->
        <script type="text/x-mustache-tmpl" id="shoppingCart">
            <div id="cart">
            <ul data-role="listview" data-inset="true" class="items">
            <li data-role="list-divider" id="cart_top">Your Cart</li>
            <li data-theme="a" id="cart_bottom">
            <a href="#">Total
            <span class="ui-li-count">
            <span id="total" class="currency">
            0.00
            </span>
            </span>
            </a>
            </li>
            </ul>
            </div>
            <button id="dump" data-role="button">Proceed</button>
        </script>
        <script type="text/x-mustache-tmpl" id="cashierTemplate">
            <div role="main" class="ui-content">
            <label for="select-choice-0" class="select">Server:</label>
            <select name="select-choice-0" id="select-choice-0" onchange="window.localStorage['server'] = this.value">
            <option></option>
            {{#cashier}}
            <option value="{{cashier_code}}">{{name}}</option>
            {{/cashier}}
            </select>
            </div>
            <div role="main" class="ui-content">
            <label for="pax" class="input">Pax:</label>
            <input name="pax" id="pax" value="1" onchange="window.localStorage['pax'] = this.value"/>
            </div>
        </script>
    </head>
    <body>

        <!-- ********* -->
        <!-- HOME PAGE -->
        <!-- ********* -->
        <section data-role="page" id="home">
            <header data-role="header">
                <h1>Beer Exchange</h1>
                <nav data-role="navbar">
                    <ul>
                        <li><a href="#home" class="ui-btn-active">Home</a></li>
                        <li><a href="#menu">Menu</a></li>
                        <li><a href="#order">My Order</a></li>
                    </ul>
                </nav>
            </header>
            <div data-role="content">
                <div style="text-align: center;">
                    <img src="images/logo.png" alt="Logo">
                    <p></p>
                    <p></p>
                    <div id="cashier_list">Loading...</div>
                </div>
            </div>
            <footer data-role="footer" data-position="fixed"><h4><a href="#home">Home</a></h4></footer>
        </section><!-- /page -->

        <!-- ********* -->
        <!-- MENU PAGE -->
        <!-- ********* -->
        <section data-role="page" id="menu">
            <header data-role="header">
                <a href="#home" data-role="button" data-rel="back" data-icon="back" >Back</a>
                <h1>Menu</h1>
                <a href="#order" data-icon="grid">My Order</a>
            </header>

            <div data-role="content">
                <ul data-role="listview" data-filter="true" id="menu_items">
                    <!-- menu will be rendered here! -->
                </ul>
            </div>

            <footer data-role="footer" data-position="fixed"><h4><a href="#home">Home</a></h4></footer>
        </section><!-- /page -->

        <!-- ********** -->
        <!-- ORDER PAGE -->
        <!-- ********** -->
        <section data-role="page" id="order">
            <header data-role="header">
                <a href="#home" data-role="button" data-rel="back" data-icon="back" >Back</a>
                <h1>My Order</h1>
                <a href="#menu" data-icon="grid">Menu</a>
            </header>

            <div data-role="content">
                <div id="theCart">Foo</div>
            </div>

            <footer data-role="footer" data-position="fixed"><h4><a href="#home">Home</a></h4></footer>
        </section><!-- /page -->

    </body>
</html>